<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
	<meta charset="utf-8">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link type="text/css" rel="stylesheet" href="../../template/css/com/com.css"/>
	<link type="text/css" rel="stylesheet" href="../../template/css/list/style.css"/>
	<link rel="stylesheet" href="../../resource/weuimin.css" />
    <link rel="stylesheet" href="../../resource/jinsuistyle.css" />
	<script src="../../template/js/jquery.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script src="../../script/api.js"></script>
    <style type="text/css">

    	body{
    	    background-color: #f1f1f1 !important;
    	}
      #But_serachHotel{
        width: 75%;
        height: 45px;
        background-color: #F8562E;
        margin:3%;
        font-size: 20px;
        color:#ffffff;
        line-height: 45px;
        vertical-align: middle;
        text-align: center;
        float:left
      }

      .condition_query{
        width: 94%;
        height: 50px;
        background-color: #E8E8E8;
        margin:3%;
        margin-top: 4%;
      }

      .condition_query_title{
        width: 60px;
        height: 50px;
        /*background-color: blue;*/
        line-height:50px;
        margin-left: 5px;
        font-size: 15px;
        float: left;
        color: #808080;
        vertical-align:middle;
        /*font-family: 'KaiTi_GB2312';*/
      }

      .condition_query_txt{
        width: 270px;
        /*background-color: red;*/
        height: 50px;
        line-height:50px;
        font-size: 18px;
        color: #111111;
        float: left;
        vertical-align:middle;
      }
      .condition_query_time{
        background-color: #E8E8E8;
        height: 38px;
        width: 100px;
        float: left;
        position: relative;
      }

        </style>
          <script type="text/javascript">
          window.apiready = function() {

            var startTime = document.getElementById('startTime');
            var endTime = document.getElementById('endTime');
            checkOutEnd = getNowFormatDate(getDate(),1);
            checkOutStart = getNowFormatDate(getDate(),0);
            $("#startTime").val(checkOutStart);
            $("#endTime").val(checkOutEnd);
            $api.attr(startTime, 'min', checkOutStart);
            $api.attr(endTime, 'min', checkOutEnd);

            var uislider = api.require('UISlider');
            uislider.open({
                animation: true,
                orientation: 'horizontal',
                rect: {
                    x: 30,
                    y: 300,
                    size: 300
                },
                bubble: {
                    direction: 'top',
                    state: 'always',
                    w: 40,
                    h: 20,
                    // text-align:center,
                    size: 10,
                    color: '#888',
                    // bg: 'widget://image/search_zc/location1.jpg',
                    // prefix: '',
                    // suffix: ''
                },

                handler: {
                    w: 20,
                    h: 20,
                    bg: 'widget://image/search_zc/handler.png'
                },
                bar: {
                    h: 10,
                    bg: 'widget://image/search_zc/bar_bg.png',
                    active: 'widget://image/search_zc/bar_active.png'
                },
                value: {
                    min: 0,
                    max: 500,
                    step: 50,
                    init: 0
                },
                fixedOn: api.frameName,
                fixed: false
            }, function(ret, err) {
                if (ret) {
                    // alert(JSON.stringify(ret));
                } else {
                    // alert(JSON.stringify(err));
                }
            });


            var timeRecord = {
              startTime:'',
              endTime:'',
              changeTime:''
            }
            function touchstartFn(){
              timeRecord.startTime = new Date().getTime();
              openArea.style.color = "#660099";
            }

            function touchendFn(){
              timeRecord.endTime = new Date().getTime();
              timeRecord.changeTime = timeRecord.endTime - timeRecord.startTime;
              if(timeRecord.changeTime<300){
                opennima();
              }
              openArea.style.color = "#005DA9";
            }
        }
          function modifyStartTime(){
              var st = $("#startTime").val();
              var startTime = getNowFormatDate(st,0);
              var endTime = getNowFormatDate(st,1);
              $("#endTime").val(endTime);
              var et = document.getElementById('endTime');
              $api.attr(et, 'min', endTime);
         }

        function modifyEndTime(){
           var startDate = $("#startTime").val();
           var endDate = $("#endTime").val();
           var ddate = getDays(startDate,endDate);
           $("#rest_day").html("共"+ddate+"晚");
         }

         function getDays(date1 , date2){
           var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
           //根据年 . 月 . 日的值创建Date对象
           var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
           var date2Str = date2.split("-");
           var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
           var t1 = date1Obj.getTime();
           var t2 = date2Obj.getTime();
           var dateTime = 1000*60*60*24; //每一天的毫秒数
           var minusDays = Math.floor(((t2-t1)/dateTime));//计算出两个日期的天数差
           var days = Math.abs(minusDays);//取绝对值
           return days;
        }

        function getNowFormatDate(date,addDayCount) {
           var now = new Date(date);
           now.setDate(now.getDate()+addDayCount);
           //格式化日，如果小于9，前面补0
           var day = ("0" + now.getDate()).slice(-2);
           var mday =  ("0" + now.getDate()).slice(-2);
           var month = ("0" + (now.getMonth() + 1)).slice(-2);
           //拼装完整日期格式
           var newDate = now.getFullYear()+"-"+(month)+"-"+(day) ;
           return newDate;
       }

       function getDate(){
         var ddd = new Date();
         var day =ddd.getDate();

         if(ddd.getMonth()<10){
         var month = "0"+(ddd.getMonth()+1);
         }

         if(ddd.getDate()<10){
          day = "0"+ddd.getDate();
         }

         var datew = ddd.getFullYear()+"-"+month+"-"+day;
         return datew;
       }



      //  function text_onfocus(){
      //     var text = $("#quary_text").val();
      //     alert(text);
      //     if(text=="关键字/酒店名"){
      //         //  $("#rest_day").html("共"+ddate+"晚");
      //       $("#quary_text").html("123123");
      //       $("#quary_text").value="123";
      //       alert(22);
      //     }
      //  }
          </script>
 </head>
    <body>
  <header id="statusBar">
        <div style="margin-top:25px;;height:185px;background:url('../../image/search_zc/search_head.jpg');display: table;width: 100%;background-size:100%">
           <div style="height:50px;line-height: 50px;color: #ffffff;">
               <div style="width: 26%;margin-left: 4%;font-size: 16px;float: left;" onclick="api.closeWin();">
	           返回
	           </div>
	           <div style="text-align: center;font-weight:bold;width: 40%;font-size: 16px;float: left;">
	           四川商旅
	           </div>
           </div>
        </div>
	</header>


	<!-- <div class="com-content" style="padding-top: 0px;background-color:#ffffff ">

      <div class="condition_query">
          <div class="condition_query_title">目的地</div>
          <div class="condition_query_txt">四川省成都市</div>
      </div>
      <div class="condition_query" style="height:80px">
          <div class="condition_query_title"style="height:80px;line-height:80px">时间</div>
          <div class="condition_query_txt"style="height:40px;line-height:40px;color:#888;font-size:15px">
            <div style="width:40px;height:40px;margin-right:0px;float:left">入住:</div>
            <div class='condition_query_time'>
                 <input id="startTime"  style="border: none;height:35px;font-size: 16px;appearance:none;width: 100%;text-align: center;background-color:E8E8E8" type="date" value=""  min="" onchange="modifyStartTime()"/>
            </div>
          </div>
          <div class="condition_query_txt"style="height:40px;line-height:40px;color:#888;font-size:15px">
            <div style="width:40px;height:40px;margin-right:0px;float:left">离店:</div>

            <div class='condition_query_time'>
                 <input id="endTime"  style="border: none;height:35px;font-size: 16px;appearance:none;width: 100%;text-align: center;background-color:E8E8E8" type="date" value=""  min="" onchange="modifyEndTime()"/>
            </div>
            <div id="rest_day" style="height:35px;float: right;width:50px;text-align: center;color: #8B8970;">
            共1晚
            </div>
          </div>
      </div>
      <div class="condition_query">
          <div class="condition_query_title">搜索</div>
            <input id='quary_text' type="text" name="input" style="height:36px;width:78%;margin-left:0px;border:0px" placeholder="关键字/酒店名"  />
      </div>
      <div class="condition_query">
          <div class="condition_query_title">价格</div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >￥</div>
          <div style="width:80px;height:40px;background-color:#FFFFFF;float:left;margin-top:5px" onclick=""></div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >~</div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >￥</div>
          <div style="width:80px;height:40px;background-color:#FFFFFF;float:left;margin-top:5px" ></div>
      </div>
      <div class="condition_query">
          <div class="condition_query_title">星级</div>
          <div style="width:80px;height:40px;margin-top:5px;background-color:#FFFFFF;float:left" ></div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >星</div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >~</div>
          <div style="width:80px;height:40px;background-color:#FFFFFF;margin-top:5px;float:left" ></div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >星</div>
      </div>

      <div id='But_serachHotel'>查找酒店
      </div>
      <div style="height: 45px;width: 45px;margin:3%;background:url('../../image/search_zc/location1.jpg');float:left;background-size:100%" ></div>
<!-- background:url('../../image/search_zc/location1.jpg') -->
		</div>
	</div> -->
	<!-- 加载动画 -->
	<div id="loadingToast" style="display:none;">
			<div class="weui-mask_transparent"></div>
			<div class="weui-toast">
				<i class="weui-loading weui-icon_toast"></i>
				<p class="weui-toast__content">数据加载中...</p>
			</div>
		</div>
	<!-- 公共底部，必须引用 -->

<!--			<div class="com-footer-area footer" id="js-com-footer" style="width:100%;height: 8%;">
				<img src="../../image/db.png" style="width:100%;"/>
			</div>-->

</body>

</html>
